<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>29_事件的类型</title>
    <link rel="stylesheet" href="./css/basic.css" />
    <style>
      .container {
        margin: 20px auto;
        width: 50vw;
        height: 200px;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <input type="text" id="txtInput" />
    <div class="container" index="0">当前移动：</div>
    <div class="container" index="1">当前移动：</div>
    <div class="container" index="2">当前移动：</div>
    <script>
      document.querySelectorAll(".container").forEach((dom, index) => {
        let count1 = 0;
        let count2 = 0;
        let count3 = 0;
        dom.addEventListener("mousemove", (event) => {
          //判断当前dom属于哪一块
          if (dom.getAttribute("index") === "0") {
            count1++;
            // document.querySelector(
            //   "div[index='0']"
            // ).innerText = `当前移动：${count1}`;
            event.target.innerText = `当前移动${count1}`; //触发事件对象的本身
            event.target.style.color = "black";
            event.target.style.backgroundColor = "brown";
          } else if (dom.getAttribute("index") === "1") {
            count2++;
            event.target.innerText = `当前移动${count2}`; //触发事件对象的本身
            event.target.style.color = "red";

            // document.querySelector(
            //   "div[index='1']"
            // ).innerText = `当前移动：${count2}`;
          } else {
            count3++;
            event.target.innerText = `当前移动${count3}`; //触发事件对象的本身
            event.target.style.color = "blue";

            // document.querySelector(
            //   "div[index='2']"
            // ).innerText = `当前移动：${count3}`;
          }
        });
      });
      //   document.querySelector("#txtInput").addEventListener("change", () => {
      //     alert(123);
      //   });
      document.querySelector("#txtInput").addEventListener("input", () => {
        // alert(123);
      });
      document.querySelector("#txtInput").addEventListener("keyup", (event) => {
        //判断按下了回车键
        // if (event.key === "Enter") {
        //   alert("您按下了回车键1");
        // }
        if (event.keyCode === 13) {
          alert("您按下了回车键2");
        }
        // alert("弹起");
      });
      document
        .querySelector("#txtinput")
        .addEventListener("keydown", (event) => {
          // alert("按下");
        });
    </script>
  </body>
</html>
